import * as React from 'react';
import { inject,observer } from 'mobx-react';
// import { IStore, IUser } from '../model';
// import LayoutOne from  '../../components/layout/layoutOne';
import LayoutMenu from  '../../components/layout/layoutMenu';
import {Layout, Menu, Icon, Avatar} from 'antd';
// import avatar from '../images/ev.jpg';

import Test1 from '../test/test1';
import Test2 from '../test/test2';
import './style.scss';

const { Header, Footer, Sider, Content } = Layout
const MenuItem = Menu.Item
const SubMenu = Menu.SubMenu

const routes = [
    {
        path: <Test1/>,
        exact: true,
        name: '主页',
        icon: 'home'
    },
    {
        path: <Test2/>,
        name: '订单管理',
        icon: 'exception'
    },
    {
        path: <Test1/>,
        name: '商品管理',
        icon: 'database'
    },
    {
        path: <Test2/>,
        name: '分类管理',
        icon: 'appstore-o'
    },
    {
        path: <Test1/>,
        name: '个人中心',
        icon: 'user'
    }
];
// @inject((store : IStore) => ({
//     user: store.user
// }))
// @observer
class Headers extends React.Component<any, any> {
    constructor(props:any){
        super(props);
        this.state={
            collapsed: false,
            mode: 'inline',
            winHeight: 0,
            selectedMenuKey: 0,
            path: <Test1/>
        };
    }
    onCollapse(collapsed: boolean) {
        this.setState({
            collapsed,
            mode: collapsed ? 'vertical' : 'inline',
        });
    }
    componentDidMount() {
        this.resizeWindow()
        window.addEventListener('resize', this.resizeWindow.bind(this))
    }
    resizeWindow() {
        this.setState({
            winHeight: document.body.clientHeight
        })
    }
    onclick=(props:any)=> {
       console.log('props', props)
        this.setState(routes[parseInt(props.key)]);
    }

    render() {
        return (
            <LayoutMenu>
                <Layout style={{ height: this.state.winHeight }}>
                    <Sider style={{ minHeight: this.state.winHeight }} collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse.bind(this)}>
                        <div className="logo" >
                            <Avatar src='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png' />
                            {/*<img src={require('../images/ev.jpg')} alt="" />*/}
                        </div>
                        <Menu theme="light"  mode={this.state.collapsed ? 'vertical' : 'inline'} defaultSelectedKeys={[this.state.selectedMenuKey + '']}>
                            {
                                routes.map((route, index) => {
                                    return  <MenuItem key={index} onClick={this.onclick}>
                                        <Icon type={route.icon || ''} />
                                        {route.name}
                                        </MenuItem>
                                })
                            }
                        </Menu>
                    </Sider>
                    <Layout>
                        <Header className='header'>
                            {/*<SearchBox />*/}
                            {/*<div className="placeholder"></div>*/}
                            {/*<div className="user-info">*/}
                            {/*    <span className="user">{this.props.user ? this.props.user.userName : ''}</span>*/}
                            {/*</div>*/}
                            {/*<ActionTag iconField={<Icon type='logout' />} textField='退出' onClick={this.onLogout.bind(this)} />*/}
                        </Header>
                        <Content className="main-content" >

                            <Layout>
                                {this.state.path}
                             </Layout>
                        </Content>
                        <Footer style={{ textAlign: 'center', padding: "0 0 10px" }}>
                        </Footer>
                    </Layout>
                </Layout>
            </LayoutMenu>
        )
    }
}

export default Headers;